import React from 'react';

class EventDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'zhangsan',
      list: [
        {
          id: 'id-1',
          title: '标题1'
        },
        {
          id: 'id-2',
          title: '标题2'
        },
        {
          id: 'id-3',
          title: '标题3'
        }
      ]
    }

    // 修改方法的 this 指向
    this.clickHandler1 = this.clickHandler1.bind(this)
  }
  render() {

    // this - 使用 bind
    const thisDemo1 = <p onClick={this.clickHandler1}>
      {this.state.name}
    </p>

    // this - 使用箭头函数
    const thisDemo2 = <p onClick={this.clickHandler2}>
      {this.state.name}
    </p>

    // event
    const eventDemo = <a href="https://imooc.com/" onClick={this.clickHandler3}>
      click me
    </a>

    // 传递参数 - 用 bind(this, a, b)
    const paramsDemo = <ul>{this.state.list.map((item, index) => {
      return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>
        index {index}; title {item.title}
      </li>
    })}</ul>

    return (
      <div>
        <h4>1. this - 使用 bind</h4>
        {thisDemo1}
        <h4>2. this - 使用箭头函数</h4>
        {thisDemo2}
        <h4>3. event</h4>
        {eventDemo}
        <h4>4. 传递参数</h4>
        {paramsDemo}
      </div>
    )
  }

  clickHandler1() {
    // console.log('this....', this) // this 默认是 undefined
    this.setState({
      name: 'lisi'
    })
  }

  // 箭头函数, this 指向当前实例
  clickHandler2 = () => {
    this.setState({
      name: 'lisi'
    })
  }

  // 获取 event
  clickHandler3 = (event) => {
    event.preventDefault() // 阻止默认行为
    event.stopPropagation() // 阻止冒泡
    console.log('target', event.target) // 指向当前元素，即当前元素触发
    console.log('current target', event.currentTarget) // 指向当前元素，假象！！！

    // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
    console.log('event', event) // 不是原生的 Event ，原生的 MouseEvent
    // console.log('event.__proto__.constructor', event.__proto__.constructor)

    // 原生 event 如下。其 __proto__.constructor 是 MouseEvent
    console.log('nativeEvent', event.nativeEvent)
    console.log('nativeEvent target', event.nativeEvent.target)  // 指向当前元素，即当前元素触发
    console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document ！！！

    // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
    // 2. event.nativeEvent 是原生事件对象
    // 3. 所有的事件，都被挂载到 document 上
    // 4. 和 DOM 事件不一样，和 Vue 事件也不一样
  }

  // 传递参数
  clickHandler4(id, title, event) {
    console.log(id, title)
    console.log('event', event) // 最后追加一个参数，即可接收 event
  }
}

export default EventDemo;
